<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>watch和computed区别</title>
    <!--    引入Vue-->
    <script src="../../static/js/vue.js"></script>
    <style>
        .basic {
            height: 100px;
            width: 400px;
            border: 1px solid #ccc;
        }

        .success {
            background: aqua;
        }

        .warning {
            background: yellow;
        }

        .error {
            background: indianred;
        }

        .color1 {
            color: antiquewhite;
        }

        .color2 {
            color: chartreuse;
        }

        .color3 {
            color: darkgreen;
        }
    </style>
</head>
<body>
<!--装备好一个容器-->
<div id="root">
    <!--    绑定class样式   -- 字符串写法,适用于:样式的类名不确定,需要动态指定-->
    <div class="basic" :class="bg" @click="changeStyle">{{name}}</div>
    <br><br>
    <!--      绑定class样式  数组写法 适用于样式个数不确定,名字也不确定-->
    <div class="basic" :class="classArr">{{name}}</div>
    <br><br>

    <!--    绑定class样式  对象写法,适用于:要绑定的样式个数确定,名字确定,但要动态决定用不用-->
    <div class="basic" :class="classObj">{{name}}</div>
    <br><br>
    <!--    绑定style样式  对象写法-->
    <div class="basic" :style="styleObj">{{name}}</div>
    <br><br>
</div>
</body>
</html>
<script src="index.js"></script>
